<template>
  <div>
    <el-drawer
      v-model="value"
     :title="title"
     :size="size"
      :direction="direction"
      :before-close="handleClose"
    >
    <slot name='content'></slot>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref,watch } from "vue";
const props = defineProps({
  title: String,
  size:[String,Number],
  width: String,
  drawerValue: Boolean,
});
const value = ref(false);
watch(() => props.drawerValue,
  (newVal, oldVal) => {
    value.value = newVal
  }
);
const direction = ref('rtl')
const emit = defineEmits(['update:drawerValue'])
const handleClose = (done) => {
  value.value = false;
 emit('update:drawerValue',value.value)
};

</script>

<style lang='less'  scoped>
</style>